<template>
	<view class="record" :style="{paddingTop: paddingHeight + 'px'}">
		<nav-bar title="肺活量记录"></nav-bar>
		<view class="m_container">
			<view class="title">
				重新采集记录，代谢等级测量以您的最新采集记录作为参考基准进行测量
			</view>
			<view class="tabel">
				<view class="t-h">
					<view class="t-d" style="width: 45%;">
						采集时间
					</view>
					<view class="t-d border">
						数值
					</view>
					<view class="t-d" style="width: 35%;">
						标准肺活量
					</view>
				</view>
				<view class="t-b">
					<view class="t-r" v-for="(item,index) in recordList" :key="index">
						<view class="t-d" style="width: 45%;">
							{{ item.createTime }}
						</view>
						<view class="t-d border">
							{{ item.haleVol }}
						</view>
						<view class="t-d" style="width: 35%;">
							{{ item.estimateHaleVol }}
						</view>
					</view>
				</view>
			</view>
			<view class="tip">
				<text class="tip_t">建议</text>
				<text class="tip_c">注册的肺活量与你当前吹气量不符，请在测量前吸满气体，测量时尽可能呼出所有气体，或者更新你的肺活量信息</text>
			</view>
			<view class="course" @click="goWebView">
				<view class="c-left">
					<view class="c-t">
						肺活量采集测量教程
					</view>
					<view class="c-b">
						大多数观看此视频指南的人都可以更快地掌握该技术
					</view>
				</view>
				<u-image width="80rpx" :showMenuByLongpress="false" shape="circle" height="80rpx"
					src="http://oss.antaimedical.com/images/static/2024/08/66b07dade4b000d2c606b51d3upyoLq2EQvy6383f7f98771573af1a373223d388ae2.png"
					:lazy-load="true"></u-image>
			</view>
		</view>
		<view class="large_button" @click="$u.throttle(next, 1500)">更新肺活量</view>
	</view>
</template>
<script>
	import {
		findExhaleValRecord
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	let app = getApp()
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				paddingHeight: uni.getStorageSync('navbarHeight'),
				globalData: app.globalData,
				recordList: []
			}
		},
		computed: {
			...mapState({
				ble: state => state.ble, // 实时蓝牙全局状态
				userInfo: state => state.userInfo
			})
		},
		onLoad(OPTIONS) {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					bodyId: this.userInfo.id
				}
				try {
					const res = await findExhaleValRecord(params)
					if (res.code == 200) {
						this.recordList = res.data
					}
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			next() {
				uni.redirectTo({
					url: `/pagesA/health/device/connect/index?type=updateExhale`
				})
			},
			goWebView() {
				uni.navigateTo({
					url: '/pagesB/login/device/measure/webview?type=exhale'
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #FAFAFA;
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.m_container {
		width: 100%;
		padding: 48rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
			text-align: left;
		}

		.tabel {
			width: 100%;
			margin: 48rpx 0;

			.t-r,
			.t-h {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				border-radius: 16rpx;
				padding: 16rpx 0;
				background-color: #fff;

				.t-d {
					line-height: 56rpx;
					text-align: center;
					font-weight: 500;
					color: #545DDE;
					font-size: 28rpx;
				}

				.border {
					width: 25%;
					border-right: 2rpx solid rgba(#545DDE, .1);
					border-left: 2rpx solid rgba(#545DDE, .1);
				}
			}

			.t-b {

				.t-d {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}

		.tip {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #666666;

			.tip_t {
				font-size: 24rpx;
			}

			.tip_c {
				padding: 8rpx 0 32rpx;
				font-size: 20rpx;
				line-height: 32rpx;
				text-align: left;
			}
		}

		.course {
			width: 100%;
			padding: 24rpx 44rpx 24rpx 32rpx;
			margin-top: 32rpx;
			background: linear-gradient(139deg, #EFF6F9 0%, #ECEEFF 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.c-left {
				flex: 1;
				padding-right: 58rpx;

				.c-t {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					text-align: left;
					padding-bottom: 12rpx;
				}

				.c-b {
					font-size: 24rpx;
					color: #666666;
					text-align: left;
				}
			}
		}
	}

	.large_button {
		position: fixed;
		bottom: 76rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>